<template>
  <view>
    <view class="check">
      <view>
        <text v-model="text" class="textstyle">{{text}}</text>
        <image
          @click="showbox"
          class="imgstyle"
          :src="fold ? '../static/iamges/topArrow.png' : '../static/iamges/bottomArrow.png'"
        />
      </view>
      <view v-show="fold" class="dropbox">
        <text
          @click="check(item)"
		
          v-for="(item, index) in select"
          :key="index"
          class="select"
          >{{ item.name }}</text>
      </view>
    </view>
  </view>
  
</template>
<script>
export default {
  data() {
    return {
      text:"活期",
      fold: false,
	  select:[{name:"活期"},{name:"基金"},{name:"黄金"},{name:"定期"},{name:"全部"}]
    };
  },
  methods: {
    showbox() {
      this.fold = !this.fold;
	 
    },
    check(item) {
		
        this.text=item.name;
		console.log(item);
        this.fold = !this.fold;
		this.$emit('checks',item.name)
		 // $emit()?
		
    },
  },
};
</script>
<style  scoped>
.check {
  width: 150rpx;
  height:50rpx;
  font-size: 24rpx;
  color:#6b6b6b;
  /* padding: 4rpx 10rpx 12rpx 16rpx; */
  text-align: center;
  border: 1rpx solid #d9d9d9;
  border-radius: 10rpx;
  margin-right: 50rpx;
  
}
image{
	width:36rpx;
	height:36rpx;
}
.imgstyle {
  position: relative;
  top: 10rpx;
}
.dropbox {
  position: relative;
  top: 12rpx;
  height:200rpx;
  border: 2rpx solid #F7F7F7;
  box-shadow:0rpx 8rpx 6rpx rgb(0 0 0 / 3%);
  border-radius: 0rpx 0rpx 10rpx 10rpx;
  overflow-y: scroll;
}
.select {
  display: block;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
}
.textstyle{
    color: #ccc;
    display: inline-block;
    width: 80rpx;
	
}
</style>